<template>
  <div id="map" style="height:100%;width:100%">
  </div>
</template>

<script setup>
// import L from 'leaflet'
// import 'leaflet/dist/leaflet.css'
import { onMounted, nextTick } from 'vue'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import 'ol/ol.css'
import Feature from "ol/Feature";
import MarkIcon from '@/assets/images/map/marker-icon.png'
import { Stroke, Style, Circle, Fill,Icon } from "ol/style";
import Point from "ol/geom/Point";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
let map = null
let clickfn = null // map 点击事件

const emit = defineEmits(['ready'])

onMounted(() => {
  init()
})

/**
   * 地图跳转具体经纬度的位置
   * lonlat：经纬度
   * zoom：缩放级别
   * options: 可选项
   */
// const flyTo = (lonlat, zoom, options) => {
//   nextTick(() => {
//     map.flyTo(lonlat, zoom, options)
//   })
// }
/**
   * 地图跳转具体经纬度的位置
   * fun :点击事件回调
   */
const mapClick = (fun) => {
  clickfn = function (e) {
    fun(e)
  }
  map.on('click', clickfn)
}
/**
   * 清除点击事件
   */
const removeMapClick = () => {
  map.off('click', clickfn)
}
/**
 * 在地图上标记点
 */
const createPoint = ({ lonlat }) => {
  let pointFeature = new Feature({
    geometry: new Point(lonlat),
  })
  let oldLayer = getLayerById(map,'pointLayer');
  if(oldLayer){
    oldLayer.getSource().clear();
    oldLayer.getSource().addFeatures([pointFeature])
  }else{
    var pointSource = new VectorSource({
      features: [pointFeature]
    });
    var pointLayer = new VectorLayer({
      source: pointSource,
      style: new Style({
        image: new Icon({
          scale: 0.8,
          src: MarkIcon,
          anchor: [0.48, 0.52]
        }),
      }),
    });
    pointLayer.set("layerid","pointLayer")
    map.addLayer(pointLayer);
  }
}
const getLayerById = (map,layerid)=>{
  let layerv;
  map.getLayers().getArray().map((item)=>{
    if(item.get('layerid')==layerid){
      layerv = item;
    }
  })
  return layerv
}
const init = () => {
  // 地图实例
  map = new Map({
    target: 'map',                         // 对应页面里 id 为 map 的元素
    layers: [                              // 图层
      new Tile({                           // 使用瓦片渲染方法
        source: new XYZ({
          url: "http://t7.tianditu.com/DataServer?T=vec_w&tk=bd63acf989a30d1eb0e33c3248803017&x={x}&y={y}&l={z}"//深色底图
        }),
      }),
      new Tile({                           // 使用瓦片渲染方法
        source: new XYZ({
          url: "http://t3.tianditu.com/DataServer?T=cva_w&tk=bd63acf989a30d1eb0e33c3248803017&x={x}&y={y}&l={z}"//深色底图
        }),
      }),
    ],
    view: new View({                       // 地图视图
      projection: "EPSG:4326",             // 坐标系，有EPSG:4326和EPSG:3857
      center: [110.014083, 19.737545],     // 深圳坐标
      minZoom:10,                          // 地图缩放最小级别
      zoom: 12                             // 地图缩放级别（打开页面时默认级别）
    })
  })
  // map = L.map('map').setView([19.737545, 110.014083], 10)
  // L.tileLayer("http://t{s}.tianditu.com/DataServer?T=vec_w&tk=bd63acf989a30d1eb0e33c3248803017&x={x}&y={y}&l={z}", {
  //   subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
  // }).addTo(map)
  // L.tileLayer("http://t{s}.tianditu.com/DataServer?T=cva_w&tk=bd63acf989a30d1eb0e33c3248803017&x={x}&y={y}&l={z}", {
  //   subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
  // }).addTo(map)
  nextTick(() => {
    emit('ready') // 地图加载完成
  })
}
defineExpose({ removeMapClick, mapClick, createPoint })
</script>

<style lang="scss" scoped>

</style>
